<template>
    <div class="flex flex-col h-screen overflow-hidden">
        <div class="overflow-y-auto grow">
            <UpPullLoad @trigger="loadMore" @scroll="scroll" ref="scrollRef">
                <div>
                    <div class="absolute top-0 left-0 right-0 z-20 flex items-center justify-between h-12 px-4"
                        :style="{ opacity }">
                        <div>
                            <Back />
                        </div>
                        <div class="flex space-x-2">
                            <div class="grid w-8 h-8 rounded-full bg-white/50 place-content-center">
                                <RouterLink :to="{
                                    name: 'cart'
                                }">
                                    <IFluent:cart-16-regular class="text-lg" />
                                </RouterLink>
                            </div>
                            <div class="grid w-8 h-8 rounded-full bg-white/50 place-content-center"
                                @click="shareRef.open()">
                                <IFluent:share-16-regular class="text-lg" />
                            </div>
                        </div>
                    </div>
                    <div ref="navRef"
                        class="absolute top-0 left-0 right-0 z-20 flex items-center justify-between h-12 px-4 text-gray-600 bg-white border-b"
                        :style="{ opacity: 1 - opacity }">
                        <div class="flex items-center space-x-2 text-sm">
                            <Back class="bg-transparent" />
                            <div @click="toPosi(commendRef)">评价</div>
                            <div @click="toPosi(detailRef)">详情</div>
                            <div @click="toPosi(recommendRef)">推荐</div>
                        </div>
                        <div class="flex space-x-2">
                            <RouterLink :to="{
                                name: 'cart'
                            }">
                                <div class="grid w-8 h-8 place-content-center">
                                    <IFluent:cart-16-regular class="text-lg" />
                                </div>
                            </RouterLink>
                            <div class="grid w-8 h-8 place-content-center" @click="shareRef.open()">
                                <IFluent:share-16-regular class="text-lg" />
                            </div>
                        </div>
                    </div>
                </div>
                <div ref="bannerRef">
                    <Banner />
                </div>
                <Price />
                <Coupon />
                <Info />
                <div class="m-4 border-b"></div>
                <Property />
                <div ref="commendRef">
                    <div class="my-4 border-b"></div>
                    <Comment />
                </div>
                <div ref="detailRef">
                    <div class="mt-4 border-b"></div>
                    <Detail />
                </div>
                <div ref="recommendRef">
                    <div class="mt-4"></div>
                    <Recommend ref="recommendCompRef" />
                </div>
                <Sku />
            </UpPullLoad>
        </div>
        <Tools />
        <Share ref="shareRef" :icon="false" />
        <div class=" safe-area-inset-top shrink-0"></div>
    </div>
</template>
    
<script setup lang='ts'>
import Banner from './components/banner.vue';
import Price from './components/price.vue';
import Coupon from './components/coupon.vue'
import Info from './components/info.vue'
import Property from './components/property.vue'
import Comment from './components/comment.vue';
import Recommend from './components/recommend.vue'
import Tools from './components/tools.vue'
import Detail from './components/detail.vue'
import Sku from './components/sku.vue';
const scrollRef = ref();
const bannerRef = ref();
const commendRef = ref()
const detailRef = ref()
const recommendRef = ref();
const navRef = ref()
const shareRef = ref();
const recommendCompRef = ref()
const opacity = ref(1);
var bannerHeight = 0;
var navHeight = 0;
const scroll = (e: Event) => {
    const el = e.target as HTMLDivElement
    if (bannerHeight - el.scrollTop > 0) {
        opacity.value = 1 - (el.scrollTop / bannerHeight);
    } else {
        opacity.value = 0;
    }
}
const toPosi = (ref: HTMLElement) => {
    (scrollRef.value as HTMLElement).scrollTo({
        top: ref.offsetTop - navHeight,
        behavior: 'smooth'
    })
}
const loadMore = ({ done }: any) => {
    recommendCompRef.value.loadMore(done)
}
onMounted(() => {
    bannerHeight = bannerRef.value.offsetHeight
    navHeight = navRef.value.offsetHeight;
})

</script>
    
<style></style>